<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>

	<view class="ball_details_wrap flx " v-else>
        <view @click="nav_to(`/pages/user/user_visitor?id=${resData.UserID}`)" class="myregbox">
			<view class="leftbox">
				<image class="heimg" :src="resData.HeadImgUrl" mode=""></image>
				<view class="lename">{{resData.Name?resData.Name:'匿名'}}</view>
				<view class="Initiator">发起人</view>
			</view>
			<view class="middbox" v-if="resData.UserID == user.UserID">

                <view v-if="Success_Msg == '您已拒绝该球局'" class="mid_1">已拒绝</view>
				<view v-else-if="resData.Status== -1" class="mid_1">已取消</view>
                <view v-else-if="resData.Item[1].Status==1" class="mid_1">预约成功</view>
				<view v-else class="mid_1">预约中</view>
				<image class="mid_2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17125606119631454.png"></image>
                <!-- <view v-if="Success_Msg == '报名已确认，等待开局'" class="mid_3">待对方同意</view>
                <view v-else-if="resData.Status==1" class="mid_3">进行中</view>
                <view v-else-if="Success_Msg == '您已拒绝该球局'" class="mid_3">已拒绝</view>
				<view v-else class="mid_3">待你同意</view> -->
			</view>
			<view class="middbox" v-else>
                <view v-if="Success_Msg == '您已拒绝该球局'" class="mid_1">已拒绝</view>
                <view v-else-if="Success_Msg == '报名已确认，等待开局'" class="mid_1">预约成功</view>
				<view v-else-if="resData.Item[1].Status == -2" class="mid_1">已拒绝</view>
				<view v-else class="mid_1">预约中</view>
				<image class="mid_2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17125606119631454.png"></image>
                <!-- <view v-if="Success_Msg == '报名已确认，等待开局'" class="mid_3">待对方同意</view>
                <view v-else-if="resData.Status==1" class="mid_3">进行中</view>
                <view v-else-if="Success_Msg == '您已拒绝该球局'" class="mid_3">已拒绝</view>
				<view v-else class="mid_3">待你同意</view> -->
			</view>
            <view v-if="resData.UserID == user.UserID"  class="rightbox">
				<image class="rightimg" :src="resData.Item[1].HeadImgUrl" mode=""></image>
				<view class="rname">{{resData.Item[1].Name?resData.Item[1].Name:'匿名'}}</view>
                <view v-if="resData.Item[1].Status == 1" class="rstate">已同意</view>
                <!-- <view v-else-if="resData.Item[1].Status==1" class="rstate">进行中</view> -->
                <view v-else-if="Success_Msg == '您已拒绝该球局'" class="rstate">已拒绝</view>
				<view v-else class="rstate">待同意</view>
			</view>
			<view v-else  class="rightbox">
				<image class="rightimg" :src="user.HeadImgUrl" mode=""></image>
				<view class="rname">{{user.Name?user.Name:'匿名'}}</view>
                <view v-if="Success_Msg == '报名已确认，等待开局'" class="rstate">已同意</view>
                <view v-else-if="resData.Status==1" class="rstate">进行中</view>
                <view v-else-if="Success_Msg == '您已拒绝该球局'" class="rstate">已拒绝</view>
				<view v-else-if="resData.Item[1].Status == -2" class="rstate">已拒绝</view>
				<view v-else class="rstate">待同意</view>
			</view>
		</view>
        <view class="conbox">
            <view v-if="showShopName" class="con1" @click="nav_to('/pages/ball/ball_site')">
				<view class="cr1">场地</view>
				<view class="cl2">
					<input v-model="ShopName" type="text" disabled placeholder="请选择比赛场地" />
				</view>
			</view>
            <view v-else class="con1">
                <view class="cr1">场地</view>
                <view class="cl2">{{resData.Place || resData.ShopName?resData.Place || resData.ShopName:''}}</view>
            </view>
            <view v-if="show1Time" class="con1" @click="showTime = true">
				<view class="cr1">开始时间</view>
				<view class="cl2">
					<input :value="dateTime" type="text" disabled   placeholder="请选择开始时间"/>
				</view>
				<!-- <view class="icon_box"><uni-icons type="right" size="20" color="#E7E7E7"></uni-icons></view> -->
			</view>
            <view v-else class="con1">
                <view class="cr1">开始时间</view>
                <view class="cl2">{{getTime2(resData.ServerDate)+' '+resData.ServerTime}}
                </view>
            </view>
            <view class="con1">
                <view class="cr1">赠送礼物</view>
                <view class="cl2">￥{{resData.Commission}}</view>
            </view>
			<view class="con1" v-if="resData.UserID == user.UserID">
                <view class="cr1">电话</view>
				<view class="cl2" v-if="resData.Item[1].Status == 0 ">对方同意后查看电话</view>
                <view class="cl2" v-else @click="callNumber">
					<text style="color:#333333;">{{userphone}}</text>
					<image class="phoneimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105663066231291.png"></image>
					</view>
            </view>
        </view>
        <view class="bntbox">
            <block v-if="resData.UserID == user.UserID">
                <block v-if="resData.Status==3">
                    <view class="whiteBtn">组局结束</view>
                </block>
                <block v-else>
                    <block v-if="modflag">
					<block v-if="resData.Status<=2&&resData.Status>=0">
                    <view @click="cancelrese" class="whiteBtn">取消预约</view>
                    <view  class="opreateBtn" @click="modifybtn">修改预约</view>
					</block>
                    </block>
                    <block v-else>
                        <view @click="mod2btn" class="whiteBtn">取消</view>
                    <view  class="opreateBtn" @click="modcom">保存</view>
                    </block>
                </block>
                
            </block>
            <block v-else>
                <block v-if="resData.Status<=2&&resData.Status>=0">
                        <!-- <block v-if="resData.PayStatus == 1">
						    <view @click="cancelBall()" class="whiteBtn">取消球局</view>
					    </block> -->
                        <block v-if="IsInvitor">
							<view class="whiteBtn" @click="refusetn">拒绝</view>
							<view class="opreateBtn" @click="agree_invite">同意</view>
                            <!-- <view @click="cancelBall()" class="whiteBtn">取消球局</view> -->
                            <!-- <view></view> -->
						</block>
						<!-- <block v-else-if="IsSign">
							<view class="opreateBtn" @click="user_sign">开始签到</view>
						</block> -->
                        <block v-else-if="Success_Msg == '报名已确认，等待开局'">
							<view class="whiteBtn" @click="cancelBall()">取消预约</view>
						</block>
						<!-- <block v-else-if="Success_Msg == '您已拒绝该球局'">
							<view class="whiteBtn">已拒绝</view>
						</block> -->
			    </block>
                <block v-if="resData.Status==3">
                    <view class="whiteBtn">组局结束</view>
                </block>
            </block>
            
			<!-- <view class=" whiteBtn" @click="reject_invite">
                拒绝
			</view>
            <view class="opreateBtn " @click="agree_invite">
			    同意
            </view> -->
        </view>
		<!-- <view class="startopreateBtn" @click="edit">开始球局</view> -->
		<!-- 拒绝理由 -->
        <view class="refusebox" v-if="flagshow">
            <view class="reasonbox">
                <view class="retitel">原因</view>
                <input class="reinput" type="text" maxlength="16" v-model="reasontext" placeholder="请填写原因" />
                <view class="rebtnbox">
                    <view class="qux" @click="refusetn">取消</view>
                    <view class="qued" @click="reject_invite">确定</view>
                </view>
            </view>
        </view>
        <!-- 时间选择 -->
        <u-datetime-picker :minDate="minDate" ref="datetimePicker" :show="showTime" mode="datetime"
			@cancel="showTime = false" @confirm="setTime"></u-datetime-picker>


	</view>


</template>

<script>
	export default {
		data() {
			return {
				userphone:'', // 对方电话
                dateTime:'',
                minDate: new Date().getTime(),
                modflag:true,
                ShopName:'',
                showShopName:false,
                show1Time:false,
                showTime:false,
                reasontext:'',
                flagshow:false,
                initUser:{},
				ID: '',
				payPrice: 0,
				cover: '',
				user: {},
				load: false,
				resData: {},
				read: false,
				userIDList: [],
				userList: [],
				applyList: [],
				comfirm_list: [],
				is_sign: false,
				list: [],
				longitude: '',
				latitude: '',
				IsInvitor: false, //是否为邀请用户
				IsSign: false,
				IsSuccessed: false,
				Success_Msg: '',
				groupID: 0,
				groupList: [],

				my_ball_status: 0,

				is_group: -1,

				is_app_share_show: false,
                reqData:{
                    ServerDate:'',
                    ServerTime:'',
                    Longitude:null,
                    Latitude:null,
                },
			};
		},
        computed:{
            // dateTime() {
			// 		return this.reqData.ServerDate + ' ' + this.reqData.ServerTime;
			// }
        },
		async onLoad(e) {
			this.ID = e.id;

			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'ball_details',
				Platform: uni.getStorageSync('platform')
			});

			if (await this.$store.getters.getLoginState) {

				await this.init();

				uni.$on('join_confirm', () => {
					this.init();
				})
				uni.$on('people_confirm', () => {
					this.init();
				})


				this.groupID = this.ID.toString()
				await this.$im.queryGroupMemberList(this.groupID, {
					count: 100,
					nextFlag: 0
				}).then((res) => {
					// console.log(res);
					if (res) {
						this.groupList = res.userList
						this.is_group = this.groupList.findIndex((item) => item.userID == this.user.UserID)
					}
				})
			}

            uni.$on('site', async data => {
                console.log(data);
				this.ShopName = data.ShopName;
                let res = await this.$util.getGeocoder(data.Address);
                console.log('++++----');
                console.log(res);
				this.reqData.City = res.result.address_components.city;
				this.reqData.Longitude = data.Longitude
				this.reqData.Latitude = data.Latitude
			});
			uni.$on('custom', async data => {
				this.ShopName = data.Place
                this.reqData.Longitude = data.Longitude
				this.reqData.Latitude = data.Latitude
			})
		},
		async onShow() {


		},
        onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
		onUnload() {
			uni.$off('join_confirm')
			uni.$off('people_confirm')
            uni.$off('site')
			uni.$off('reward')
			uni.$off('custom')
		},
		onShareAppMessage(res) { //发送给朋友
			var pid = this.user.UserID

			return {
				title: this.$util.entitiesToUtf16(this.user.Name) + "邀请您加入组局",
				path: "/pages/ball/ball_details?pid=" + pid + "&id=" + this.resData.ID,
			}
		},
		methods: {
			//取消预约
			cancelrese(){
				const groupID = this.ID.toString()
				let _this = this;
				// const 
				uni.showModal({
					title: '温馨提示',
					content: '确定取消该预约吗？',
					confirmText: '确定',
					success: function(rs) {
						if (rs.confirm) {
							let d = _this.$api.post('Appointment/Cancel', {
								ID: _this.ID,
								Status: -1
							});
							if(d.message == 'success'){
								_this.$pv.msg('您已取消');
							}
							_this.init();
						} else if (rs.cancel) {

						}
					}
				});
			},
			//拨打电话
			callNumber() {
				uni.makePhoneCall({
					phoneNumber: this.userphone,
					success: () => {
						console.log('拨打电话成功！');
					},
					fail: () => {
						console.error('拨打电话失败！');
					},
				});
			},
            setTime(e) {
				let n = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				let b = uni.$u.timeFormat(e.value, 'hh:MM');
				console.log(n);
				console.log(b);
				this.reqData.ServerDate = n;
				this.reqData.ServerTime = b;
                this.dateTime = n + ' ' + b
				this.showTime = false;
			},
            formatter(type, value) {
				console.log(type, value);
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分  `;
				}
				return value;
			},
            //修改球局
            async modcom(){
                console.log('__+++');
                console.log(this.reqData.ServerDate);
                console.log(this.reqData.ServerTime);
                console.log(this.reqData.Longitude );
                console.log(this.reqData.Latitude );
                console.log(this.ShopName);
                   let res = await this.$api.post('Appointment/Modify',{
                     ID:this.resData.ID,
                     ServerDate:this.reqData.ServerDate,
                     ServerTime:this.reqData.ServerTime,
                     Longitude:this.reqData.Longitude ,
                     Latitude:this.reqData.Latitude,
                     Place:this.ShopName,
                 })
                console.log(res);
                if(res.data){
                    this.init()
                    this.$pv.msg('修改成功');
                }else{

                }
                this.modflag = true
                this.show1Time = false
                this.showShopName = false
                
            },
            mod2btn(){
                this.modflag = true
				this.init()
            },
            modifybtn(){
                this.show1Time = true
                this.showShopName = true
                this.modflag = false
            },
            refusetn(){
                this.flagshow = !this.flagshow
            },

			openMap(){
				let that = this
				uni.openLocation({
					latitude: this.resData.Latitude,
					longitude: this.resData.Longitude,
				});
			},
			app_share() {
				this.$refs.share.open()
			},
			openFriend() {
				this.$refs.friends.open();
			},
			async add_user() {
				this.nav_to('/pages/ball/ball_invite_people?id=' + this.resData.ID);
			},
			async reduce_user() {
				this.nav_to('/pages/ball/ball_reduce_people?id=' + this.resData.ID);
			},
			async toGroup() {
				const name = "【" + this.resData.Title + "】群聊";
				this.nav_to(
					`/pages/chat/group_game?id=${this.groupID}&type=2&name=${name}`
				)
			},
			async agree_invite() {
				const groupID = this.ID.toString()
				let _this = this;
				// const 
				uni.showModal({
					title: '温馨提示',
					content: '确定同意该预约吗？',
					confirmText: '确定',
					success: function(rs) {
						if (rs.confirm) {
							let d = _this.$api.post('Appointment/ApplyComfirm', {
								AppointmentID: _this.ID,
								Status: 1
							});


							_this.$im.joinGroup(groupID).then((res) => {
								let textMsg = '我是' + _this.user.Name
								_this.$im.sendChatMessage(2, textMsg, groupID, _this.isByte).then(
									d => {
										console.log('91------------', d)
									});
							})
							_this.$pv.msg('您已同意');

							_this.init();
						} else if (rs.cancel) {

						}
					}
				});


			},
			async reject_invite() {
				let _this = this;
				if(_this.reasontext == ''){
					_this.$pv.msg('理由不能为空');
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '确定拒绝该预约吗？',
					confirmText: '确定',
					success: function(rs) {
                        if (rs.confirm) {
							let d = _this.$api.post('Appointment/InviteComfirm', {
								AppointmentID: _this.ID,
								Status: -1,
                                Remark:_this.reasontext
							});
							_this.$pv.msg('您已拒绝改预约');

							_this.init();
                            _this.flagshow = false
						} else if (rs.cancel) {

						}
					}
				});

			},
			async user_sign() {
				let d = await this.$api.post('Appointment/UserSign', {
					AppointmentID: this.ID,
					User_Lat: this.latitude,
					User_Lng: this.longitude
				});

				if (!d.data) {

					this.$pv.msg(d.message);
					return;
				}

				this.$pv.msg('签到成功');

				this.init();
			},
			edit() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['编辑组局', '开始组局', '发放奖励', '结束组局', '取消组局'],
					success: function(res) {
						if (res.tapIndex == 0) {
							if (_this.resData.Status > 0) {
								_this.$pv.msg('组局已开始或已结束，不能编辑');
								return;
							}

							_this.nav_to('/pages/ball/ball_edit?id=' + _this.resData.ID);
						} else if (res.tapIndex == 1) {
							//开始组局
							if(_this.resData.Status == 1){
								_this.$pv.msg('组局已经开始了');
								return 
							}
							uni.showModal({
								title: '温馨提示',
								content: '你确定要开始组局吗？',
								confirmText: '确定开始',
								success: function(rs) {
									if (rs.confirm) {
										let d = _this.$api.post('Appointment/StartAppointment', {
											ID: _this.resData.ID
										}).then((res)=>{
											if(res.code == 0 && res.message == 'success'){
												_this.resData.Status = 1;
											}
										});
									} else if (rs.cancel) {

									}
								}
							});
							return;
						} else if (res.tapIndex == 2) {
							//发放奖励
							if (_this.resData.Status == 0) {
								_this.$pv.msg('组局未开始，不能发放奖励');
								return;
							}
							if (_this.resData.Commission <= 0) {
								_this.$pv.msg('组局未设置奖励，不需要发放');
								return;
							}

							_this.nav_to('/pages/ball/sendreward_user?id=' + _this.ID);

						} else if (res.tapIndex == 3) {
							//结束组局
							const groupID = _this.resData.ID.toString()
							uni.showModal({
								title: '温馨提示',
								content: '确定要结束该组局吗？',
								confirmText: '确定结束',
								success: function(rs) {
									if (rs.confirm) {
										let d = _this.$api.post('Appointment/FinishAppointment', {
											ID: _this.resData.ID
										}).then((res)=>{
											if(res.code == 0 && res.message == 'success'){
												_this.$pv.msg('组局成功结束');
												setTimeout(() => {
													uni.navigateBack()
												}, 1200)
											}
										});
										// 解散组局群聊
										// _this.$im.dismissGroup(groupID)
										
									} else if (rs.cancel) {

									}
								}
							});
						} else if (res.tapIndex == 4) {
							//取消组局

							if (_this.resData.Status > 0) {
								_this.$pv.msg('组局已开始或已结束，不能取消');
								return;
							}

							uni.showModal({
								title: '温馨提示',
								content: '确定要取消该组局吗？',
								confirmText: '确定取消',
								success: function(rs) {
									if (rs.confirm) {
										let d = _this.$api.post('Appointment/Cancel', {
											ID: _this.resData.ID
										});
										_this.$pv.msg('取消成功');
										setTimeout(() => {
											uni.navigateBack()
										}, 1200)
									} else if (rs.cancel) {

									}
								}
							});

						}
					},
					fail: function(res) {
						;
					}
				})
			},

			async init() {
				this.user = uni.getStorageSync('user');
				
				let loc = await this.getLocationSysc();

				this.longitude = loc.longitude;
				this.latitude = loc.latitude;

				let res = await this.$api.post('Appointment/Detail', {
					ID: this.ID,
					User_Lng: loc.longitude,
					User_Lat: loc.latitude
				});
                this.initUser = res.data.Item.find(v => v.IsMySelf == 1);
				this.resData = res.data;
				this.userIDList = res.data.Item.map(item => item.UserID);
				this.is_sign = res.data.Item.some(v => v.UserID == this.user.UserID);
				this.userList = res.data.Item;
				this.applyList = res.data.Item.filter(v => v.UserID != this.resData.UserID).map(v => {
					return v
				});

				this.my_ball_status = res.data.Item.filter(v => v.UserID == this.user.UserID).map(v => {
					return v.Status
				});

				console.log('my ball status' + this.my_ball_status);

				this.comfirm_list = res.data.Item.filter(v => v.Status == 1 && v.UserID != this.resData.UserID).map(
					v => {
						return v
					});

				this.payPrice = this.resData.Price;

				this.load = true;

				let d = await this.$api.post('Appointment/IsInviteUser', {
					AppointmentID: this.ID
				});

				if (d.data == 1)
					this.IsInvitor = true;
				else
					this.IsInvitor = false;

				let ud = await this.$api.post('Appointment/IsSign', {
					AppointmentID: this.ID
				});

				if (ud.data)
					this.IsSign = true;
				else
					this.IsSign = false;

				let sd = await this.$api.post('Appointment/IsSuccessed', {
					AppointmentID: this.ID
				});

				this.IsSuccessed = sd.data;
				this.Success_Msg = sd.message;
				//对方信息
				let user = await this.$api.post('User/GetUserInfo', {
					ID: this.resData.Item[1].UserID
				});
				this.userphone = user.data.Phone
				console.log('-----');
				console.log(this.userphone);
			},
			// 获取定位
			async getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				});
			},
			async subJoin() {

				let u = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});

				this.user = u.data;
				if (this.user.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '未注册用户不能报名组局，请先注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
				}

				if (this.user.IsAuth == 0)
					this.nav_to(`/pages/user/start2`);
				else
					this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`);


			},

			async join() {
				this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`);
			},
			async cancelBall() {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您确认要取消预约吗',
					showCancel: true,
					success: async function(res) {
						if (res.confirm) {
							_this.$pv.load();
							let r = await _this.$api.post('Appointment/Quit', {
								AppointmentID: _this.ID
							});
							setTimeout(() => {
								_this.$pv.msg('已取消预约');

								_this.init();

							}, 500);
						}
					}
				});
				// api/Appointment/UserCancel
			},

			sharePYQ() {
				const user = uni.getStorageSync("user");

				const pid = user.UserID;
				let id = this.ID;

				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/ball_detail?id=${id}&pid=${pid}`;
				let shareUrl = BaseUrl + paseUrl;

				console.log('share url-----' + shareUrl)

				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: shareUrl,
					title: '【Golfdate' + this.resData.GolfType + '】' + this.resData.Title,
					summary: this.resData.Remark,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					success: (res) => {
						console.log("success:" + JSON.stringify(res));
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});



			},
			shareWX() {
				const user = uni.getStorageSync("user");

				const pid = user.UserID;
				let id = this.ID;

				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/ball_detail?id=${id}&pid=${pid}`;
				let sharUrl = BaseUrl + paseUrl;
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					title: '【Golfdate' + this.resData.GolfType + '】' + this.resData.Title,
					miniProgram: {
						id: 'gh_ff1a33213d99',
						path: 'pages/ball/ball_details?id=' + id + '&pid=' + pid,
						type: 0,
						webUrl: sharUrl
					},
					success: (res) => {
						console.log("success:" + 'pages/ball/ball_details?id=' + id + '&pid=' + pid);
						console.log("success:" + JSON.stringify(res));
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});

				// this.is_app_share_show = false;
			},
		},
		computed: {

			getTime2() {
				return l => {
					let d = new Date(l);
					let timestamp = d.getTime();
					return this.$u.date(timestamp, 'yyyy-mm-dd');
				};
			},
			getWeek() {
				return l => {
					let d = new Date(l);
					// d.getDate();
					// console.log(d.getDay());
					let week = d.getDay();
					let weelStr =
						week == 0 ?
						'星期天' :
						week == 1 ?
						'星期一' :
						week == 2 ?
						'星期二' :
						week == 3 ?
						'星期三' :
						week == 4 ?
						'星期四' :
						week == 5 ?
						'星期五' :
						'星期六';
					return weelStr;
				};
			}
		}
	};
</script>

<style lang="scss">
	view,
	text {
		color: white;
	}
page{
	background-color: #F6F6F6;
}
	page {
		height: 100%;
	}

	image {
		width: 100%;
		height: 100%;
	}
    .refusebox{
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.6);
        position: absolute;
        top: 0;
        left: 0;
        .reasonbox{
            width: 640rpx;
            height: 354rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: #363636;
            .retitel{
                font-size: 36rpx;
                font-weight: 600;
                color: #fff;
                // margin: 0 auto;
                margin-left: 50%;
                transform:translate(-25%,0);
                margin-top: 40rpx;
                margin-bottom: 32rpx;
            }
            .reinput{
                width: 544rpx;
                height: 76rpx;
                background-color: #484848;
                color: #999999;
                font-size: 28rpx;
                border-radius: 16rpx;
                margin: 0 auto;
                margin-bottom: 50rpx;
                padding-left: 26rpx;
                box-sizing: border-box;
            }
            .rebtnbox{
                display: flex;
                justify-content: space-around;
                .qux{
                    width: 256rpx;
                    height: 80rpx;
                    border-radius: 48rpx;
                    border: 1rpx solid #FEF0BC;
                    font-size: 36rpx;
                    text-align: center;
                    line-height: 80rpx;
                    color: #FEF0BC;
                }
                .qued{
                    width: 256rpx;
                    height: 80rpx;
                    border-radius: 48rpx;
                    background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
                    font-size: 36rpx;
                    text-align: center;
                    line-height: 80rpx;
                    color: #4C310C;
                }
            }
        }
    }
.startopreateBtn{
	width: 90%;
    height: 96rpx;
    border-radius: 48rpx;
    background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
    font-size: 36rpx;
    text-align: center;
    line-height: 96rpx;
    color: #4C310C;
	position: absolute;
	bottom: 9%;
	left: 5%;
}
.bntbox{
        display: flex;
        justify-content: space-around;
        .opreateBtn{
            width: 218rpx;
            height: 96rpx;
            border-radius: 48rpx;
            background-color: #333333;
            font-size: 32rpx;
            text-align: center;
            line-height: 96rpx;
            color: #fff;
        }
        .whiteBtn{
            width: 218rpx;
            height: 96rpx;
            border-radius: 48rpx;
            border: 1rpx solid #333333;
            font-size: 32rpx;
            text-align: center;
            line-height: 96rpx;
            color: #333333;
        }
}
.conbox{
    width: 686rpx;
    // height: 306rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin: 32rpx;
    margin-top: 0;
	padding-bottom: 30rpx;
    .con1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        margin: 0 auto;
        margin-top: 32rpx;
        border-bottom: 1rpx solid #666666;
        padding-bottom: 26rpx;
        .cr1{
            color: #333333;
            font-size: 28rpx;
        }
        .cl2{
            color: #333333;
            font-size: 28rpx;
            input{
                font-size: 28rpx;
                text-align: right;
            }
			.phoneimg{
				width: 36rpx;
				height: 34rpx;
				vertical-align: middle;
				margin: 0 10rpx;
			}
        }
    }
}
.myregbox{
	display: flex;
	justify-content: space-around;
    width: 686rpx;
    height: 278rpx;
    margin: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
	.leftbox{
		margin-top: 32rpx;
		text-align: center;
		.heimg{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-bottom: 16rpx;
		}
		.lename{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		.Initiator{
			color: #333333;
			font-size: 24rpx;
		}
	}
	.middbox{
		margin-top: 32rpx;
		text-align: center;
		.mid_1{
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 14rpx;
		}
		.mid_2{
			width: 250rpx;
			height: 12rpx;
			margin-bottom: 24rpx;
		}
		.mid_3{
			width: 152rpx;
			height: 48rpx;
			border-radius: 27rpx;
			border: 1rpx solid #979797;
			color: rgba(255,255,255,0.6);
			font-size: 24rpx;
			text-align: center;
			line-height: 48rpx;
			margin: 0 auto;
		}
	}
	.rightbox{
		margin-top: 32rpx;
		text-align: center;
		.rightimg{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-bottom: 16rpx;
		}
		.rname{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		.rstate{
			color: #333333;
			font-size: 24rpx;
		}
	}
}


	.bottom_share_btn {
		background-color: #fff;
		position: fixed;
		height: 120rpx;
		// line-height: 120rpx;
		bottom: 10rpx;

		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-between;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}

	.detail_btn {
		color: #dcc188;
		padding: 16rpx 20rpx;
		border-radius: 6rpx;
		font-size: 36rpx;
		position: absolute;
		right: 45rpx;
		width: 230rpx;
		text-align: right;
	}

	.ball_details_wrap {
		// background: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf-bg.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: center;
		background-position-y: center;
		position: relative;

		// &::before {
		// 	position: absolute;
		// 	content: '';
		// 	width: 100%;
		// 	height: 100%;
		// 	top: 0;
		// 	left: 0;
		// 	background-color: rgba(0, 0, 0, 0.6);
		// }

		height: 100%;
		align-content: space-between;
		flex-direction: column;

		>view {
			// flex: 1;
			// padding: 45rpx 52rpx 88rpx 52rpx;
			// padding: 0 52rpx;
			// position: relative;
		}

		.ball_top {
			width: 100%;
			box-sizing: border-box;
			.operate {
				line-height: 50rpx;
				height: 50rpx;
				display: inline-block;
				align-items: right;
				position: relative;
				width: 100%;

				.chat_btn {
					color: #dcc188;
					border-radius: 6rpx;
					font-size: 36rpx;
					position: absolute;
					width: 60rpx;
					right: 240rpx;
				}

				.edit_btn {
					color: #dcc188;
					border-radius: 6rpx;
					font-size: 36rpx;
					position: absolute;
					width: 60rpx;
					right: 160rpx;
				}


				button {
					display: flex;
					background-color: unset;
					//height:50rpx !important;
					//margin-top: -30rpx;
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					// right: 100rpx;
					right: 0;
				}

			}
		}


		.user_info_wrap {
			margin: 20rpx 0 24rpx 0;
			flex: 1;

			.avatar {
				width: 126rpx;
				height: 126rpx;
				margin: 0 22rpx 0 0;
				border-radius: 50%;
				border: 1rpx solid rgb(81, 81, 87);

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.title {
				font-size: 42rpx;
				width: 100%;
			}

			.user_name {
				font-size: 32rpx;
				overflow: hidden; //超出一行文字自动隐藏 
				text-overflow: ellipsis; //文字隐藏后添加省略号
				white-space: nowrap; //强制不换行
			}

			.join_btn {
				color: #dcc188;
				padding: 16rpx 20rpx;
				border: 1px solid #cda151;
				border-radius: 6rpx;
				font-size: 36rpx;
				position: absolute;
				right: 45rpx;

			}





		}

		.ball_title_wrap {
			.ball_title {
				font-size: 46rpx;
			}

			.ball_fee {
				color: #cda151;
				font-size: 42rpx;
				margin-top: 22rpx;

				.icon {
					margin-left: 9rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.imgbox_sm {
			margin-right: 14rpx;
			display: inline-block;
			vertical-align: middle;
			font-size: 0;
			margin-left: 6rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.ball_info_desc {
			width: 100%;

			.sm_info {
				margin: 14rpx 60rpx 14rpx 14rpx;
			}

			.quit_ball_btn {
				color: #ffff00;
				align-items: center;
				width: 100%;
				text-align: center;
			}

			.ball_remark {
				margin-top: 28rpx;
				padding-left: 24rpx;
				width: 90%;
				// overflow: hidden;
			}
			.ball_address{
				.distance{
					margin-left: 58rpx;
					color: #ccc;
				}
			}
		}

		.ball_bottom {
			padding: 0 52rpx;
			>view {
				margin: 20rpx 0;
			}

			.imgbox_sm {
				margin-right: 14rpx;
				display: inline-block;
				vertical-align: middle;
				font-size: 0;
				margin-left: 6rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.ball_remark {
				margin-top: 14rpx;
				padding-left: 10rpx;
			}

			.ball_footer {
				margin-top: 68rpx;
				margin-bottom: 20rpx;

				.join_btn {
					color: #dcc188;
					padding: 16rpx 20rpx;
					border: 1px solid #cda151;
					border-radius: 6rpx;
					font-size: 36rpx;

					&.end {
						color: #dedede;
						border: 2rpx solid #dedede;
					}

					&.running {
						color: #ff557f;
						border: 2rpx solid #dedede;
					}
				}

				.joined_btn {
					color: #dcc188;
					padding: 16rpx 20rpx;
					border-radius: 6rpx;
					font-size: 36rpx;

					&.end {
						color: #dedede;
						//border: 2rpx solid #dedede;
					}

					&.running {
						color: #ff557f;
						//border: 2rpx solid #dedede;
					}
				}

				.people_num {
					>view {
						color: #cda151;
					}

					.tip {
						font-size: 28rpx;
					}

					.num {
						font-size: 48rpx;
						position: relative;
						display: inline-block;

						&::after {
							content: '人';
							position: absolute;
							margin-left: 8rpx;
							font-size: 20rpx;
							color: #cda151;
							bottom: 8rpx;
							right: -22rpx;
						}
					}
				}

				.reject {
					padding: 22rpx 110rpx;
					border-radius: 48rpx;
					border: 2rpx solid #fef0bc;
					margin: 12rpx;
				}

				.confirm {
					background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
					border-radius: 48rpx;
					padding: 22rpx 110rpx;
					margin: 12rpx;
					color: #4c310c;
				}

				.sign {
					background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
					border-radius: 48rpx;
					padding: 22rpx 110rpx;
					margin: 12rpx;
					color: #4c310c;
					width: 100% !important;
					text-align: center;
				}

				.pending {
					padding: 22rpx 110rpx;
					border-radius: 48rpx;
					border: 2rpx solid #fef0bc;
					margin: 12rpx;
					width: 100% !important;
					text-align: center;
				}

			}
		}
	}


	.mt20 {
		margin-top: 20rpx;
	}

	.pl8 {
		padding-left: 8rpx;
	}

	.pl10 {
		padding-left: 10rpx;
	}

	.btn_grey {
		background: #aaa;
		color: #ccc;
	}

	.x-user {

		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10rpx;


		.user-cell {
			width: 120rpx;
			display: flex;
			align-items: center;
			//justify-content: center;
			flex-direction: column;
			padding: 0 20rpx 20rpx 20rpx;
			position: relative;


		}


		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.x-name {
			font-size: 28rpx;
			margin-top: 5rpx;
		}

		.x-sign {
			font-size: 28rpx;
			color: #ffaa00;
			margin-top: 5rpx;
		}

		.x-nosign {
			font-size: 28rpx;
			color: #b9b9b9;
			margin-top: 5rpx;
		}
	}

	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}

	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 40rpx;
				position: absolute;
				right: 50rpx;
				top: 25rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-tip {
			margin: 0 auto;
			width: 100%;
			height: 55rpx;
			color: #4C310C;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 20rpx;
		}

		.popup-btn {
			margin: 0 auto;
			width: 120rpx;
			height: 55rpx;
			border-radius: 10rpx;
			color: #4C310C;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #B98B51
		}
	}


	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 40rpx;

		.list-cell {
			width: 22%;
			height: 120rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 10rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.list-icon {
				width: 80rpx !important;
				height: 80rpx !important;
			}

			.list-name {
				color: #333;
				font-size: 24rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>